import React from "react"
import {Route,Link,Redirect} from "react-router-dom"
//引入视图组件
import Toplist from "./Toplist"
import Playlist from "./Playlist"
class Discover extends React.Component {
    handleClick = ()=>{
        //进行跳转
        //编程式导航 push replace go goBack goForward...
        // console.log(this.props);
        //这些属性都是从组件的props.histroy这个对象中获取
        //通过编程式导航跳转到my这个页面
        //1.直接在push方法中传入路径的字符串
        this.props.history.push("/my")
        //2.传递对象,第一个参数是pathname跳转的路径,后面的参数可以是任意的键值对参数,都可以被组件的location接收
        // this.props.history.push({pathname:"/my",state:{msg:"所街三杰"},query:{name:"韩梅梅"},zw:{msg:'洗剪吹'}})

        //3.replace和push的用法一毛一样,只不过,replace这个方法会替换掉当前的历史记录栈

    }
    render(){
        return (
            <fieldset>
                <legend>发现</legend>
                <Link to="/discover/playlist">歌单</Link>
                |
                {/* 如果要重定向到嵌套路由的页面,我们需要嵌套路由的父级页面上使用redirect */}
                <Link to="/discover/toplist">排行榜</Link>
                <Redirect from="/discover" to="/discover/playlist"/>
                <Route path="/discover/toplist" component={Toplist}/>
                <Route path="/discover/playlist" component={Playlist}/>
                <button onClick={this.handleClick}>这是一个朴实无华的按钮</button>
            </fieldset>
        )
    }
}

export default Discover